<template>
  <div class="custom_sprite">
    <remote-script
      src="https://unpkg.com/spritespin@4.0.11/release/spritespin.js"
      @load="load"
    ></remote-script>
    <slot name="spriteTop"></slot>
    <div ref="spritespin"></div>
    <slot name="spriteBottom"></slot>
  </div>
</template>
<script>
export default {
  name: "custom_sprite",
  props: {
    item: {
      type: Object,
      default() {
        return {
          source: "http://spritespin.ginie.eu/images/bike6x6_big.jpg",
          width: screen.width,
          height: 230,
          frames: 34,
          framesX: 6,
          sense: -1,
          plugins: ["progress", "360", "drag"],
        };
      },
    },
  },
  data() {
    return {
      api: null,
      data: null,
    };
  },
  mounted: function() {},
  beforeDestroy: function() {
    // destroy spritespin before Vue node is destroyed
    window.jQuery(this.$el).spritespin("destroy");
  },
  methods: {
    load() {
      // create spritespin
      window.jQuery(this.$el).spritespin(this.$props.item.data);
      // access api object
      this.api = window.jQuery(this.$el).spritespin("api");
      // access data object
      this.data = window.jQuery(this.$el).spritespin("data");
      // watch changes and update spritespin
      this.$watch("options", (newVal) => {
        window.jQuery(this.$el).spritespin(newVal);
      });
    },
  },
};
</script>
<style lang="less">
@base: 23.44rem;
.custom_sprite {
  .spritespin-progress {
    position: absolute;
    width: 80%;
    left: 10%;
    top: 45%;
  }
  .spritespin-progress-label {
    color: grey;
    font-size: (14 / @base);
  }
  .spritespin-progress-bar {
    background-color: grey;
    height: (2 / @base);
  }
}
</style>
